require('../css/common/normalize.css')
require('../css/common/reset.css')
require('../css/common/property.css')
require('../css/common/basic.less')
require('../lib/fonts/iconfont.css')

require('../css/me-datas.less') 

//导入axios
const axios = require("axios");

//导入weui
require("weui")
const weui = require("weui.js")

//获取元素
let datasName2=document.querySelector('#datasName2')
let datasName3=document.querySelector('#datasName3')
let dcd=document.querySelector('#dcd')

const userId=localStorage.getItem('userId')
axios.get("http://139.9.177.51:8099/users/mysportsBadge?userId=" +userId)
.then(function(res){

// 渲染数据
console.log(res);

let user=res.data.data.user
let sport=res.data.data.sports
console.log(sport);

console.log(user);


    if(user.imgurl) {
      dcd.src=user.imgurl
    }

  })

//点击i的时候就跳转到上一个页面

document.querySelector('.datas1').addEventListener('click',function(){
  history.go(-1)
})
//引入echarts文件
const echarts = require("echarts")
const { color } = require('echarts')

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector('#zhuZi'));

// 指定图表的配置项和数据
var option = {
  //图表标题
  title: {
    text: '近七天运动时长',
    textStyle:{
      fontSize : 16
    }
  },
  //提示框组件
  tooltip: {},

  //图例组件
  legend: {
    //data: ['销量']
  },
  //柱状图的高度
  grid:{
    height:120

  },
  //X轴数据
  xAxis: {
  data: ['11-1', '11-2', '11-3', '11-4', '11-5', '11-6', '11-7']
  },
  //X轴数据
  yAxis: {},

  //数据内容
  series: [
    {
     // name: '销量',
      type: 'bar',
      data: [8, 20, 36, 30, 10, 20,42]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

//饼状图

var myChart = echarts.init(document.querySelector('#pie'));

var option2 = {
  title: {
    text: '运动分类',
    textStyle:{
      fontSize : 16
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left:'left',
    top: 'middle',
    itemHeight: 10,
    itemWidth: 10,
    icon: 'rect',
  },
  grid:{
    height:120
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['55%', '55%'],
      normal:{
        position:'inner',
      },
      data: [
        { value: 1048, name: '跑步'},
        { value: 735, name: '骑行' },
        { value: 580, name: '训练' }
      ],
      label:{
        normal:{
          position:'inside',
          formatter:'{d}%',
          color:'#fff',
        }

      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option2);



//堆叠折线图
var myChart = echarts.init(document.querySelector('#peace'));
var option3 = {
  title: {
    text: '近七日运动分类',
    textStyle:{
      fontSize : 16
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    orient: 'vertical',
    left:'right',
    top: 'middle',
    itemHeight: 10,
    itemWidth: 10,
    icon: 'rect',
    align:'left'
  },
  grid: {
    left: '3%',
    right: '20%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['11-1', '11-2', '11-3', '11-4', '11-5', '11-6', '11-7']
  },
  series: [
    {
      name: '跑步',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 445, 425, 234, 310, 330, 518]
    },
    {
      name: '骑行',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 861, 523, 154, 475, 330, 410]
    },
    {
      name: '锻炼',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option3);


//折线图
var myChart = echarts.init(document.querySelector('#broken'));
var option4 = {
  title: {
    text: '近七日训练次数',
    textStyle:{
      fontSize : 16
    }
  },
  xAxis: {
    type: 'category',
    data: ['11-1', '11-2', '11-3', '11-4', '11-5', '11-6', '11-7']
  },
  grid:{
    height:120
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260,526],
      type: 'line',
      itemStyle:{
        color:'green'
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option4);
